<template>
  <div class="portal-home">
    <!-- 专业医疗平台Hero区域 -->
    <div class="hero-section">
      <div class="hero-background">
        <div class="hero-overlay"></div>
      </div>
      <div class="hero-content container">
        <div class="hero-text">
          <h1 class="hero-title">
            <span class="title-highlight">智慧医疗</span>
            <span class="title-normal">服务平台</span>
          </h1>
          <p class="hero-subtitle">专业·可信·高效 | 让优质医疗服务触手可及</p>
          <div class="hero-features">
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="feature-text">
                <div class="feature-number">1000+</div>
                <div class="feature-label">执业医师</div>
              </div>
            </div>
            <div class="feature-divider"></div>
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon><DataBoard /></el-icon>
              </div>
              <div class="feature-text">
                <div class="feature-number">100万+</div>
                <div class="feature-label">服务患者</div>
              </div>
            </div>
            <div class="feature-divider"></div>
            <div class="feature-item">
              <div class="feature-icon">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="feature-text">
                <div class="feature-number">24小时</div>
                <div class="feature-label">在线服务</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 专业搜索服务 -->
        <div class="hero-search">
          <div class="search-container">
            <el-input
              v-model="searchQuery"
              placeholder="搜索医生、科室、疾病症状..."
              class="search-input-professional"
              size="large"
              clearable
            >
              <template #prefix>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
            </el-input>
            <el-button type="primary" size="large" class="search-btn-professional">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </div>
          <div class="search-tags">
            <span class="tags-label">热门搜索：</span>
            <el-tag 
              v-for="tag in hotSearchTags" 
              :key="tag" 
              class="search-tag" 
              @click="searchQuery = tag"
              size="small"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 核心服务区域 -->
    <div class="core-services-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">核心服务</h2>
          <p class="section-subtitle">专业医疗服务，全程数字化体验</p>
        </div>
        
        <div class="services-grid">
          <div 
            class="service-card-professional" 
            :class="{ 'card-visible': cardsVisible }"
            v-for="(service, index) in coreServices" 
            :key="index"
            @click="handleServiceClick(service)"
            :style="{ 'animation-delay': (index * 0.15) + 's' }"
          >
            <div class="service-icon-container">
              <div class="service-icon-bg" :style="{ backgroundColor: service.color }">
                <el-icon class="service-icon"><component :is="service.icon" /></el-icon>
              </div>
            </div>
            <div class="service-info">
              <h3 class="service-name">{{ service.name }}</h3>
              <p class="service-description">{{ service.desc }}</p>
            </div>
            <div class="service-action">
              <span class="action-text">立即使用</span>
              <el-icon class="action-arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 平台功能导航 -->
    <div class="platform-navigation">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">平台功能</h2>
          <p class="section-subtitle">全方位医疗服务解决方案</p>
        </div>
        
        <!-- 主要功能大卡片 -->
        <div class="main-features-grid">
          <div 
            class="feature-card-large" 
            :class="{ 'card-visible': cardsVisible }"
            v-for="(dept, index) in primaryDepartments" 
            :key="index"
            @click="handleDepartmentClick(dept, $event)"
            :style="{ '--feature-color': dept.color, 'animation-delay': (index * 0.1) + 's' }"
          >
            <div class="feature-card-content">
              <div class="feature-header">
                <div class="feature-icon-large">
                  <el-icon><component :is="dept.icon" /></el-icon>
                </div>
                <div class="feature-status">
                  <span class="status-dot-active"></span>
                  <span class="status-text">正常运行</span>
                </div>
              </div>
              
              <div class="feature-info">
                <h3 class="feature-title">{{ dept.name }}</h3>
                <p class="feature-desc">{{ dept.desc }}</p>
              </div>
              
              <div class="feature-action">
                <el-button type="primary" size="large" class="feature-btn">
                  立即进入
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
            </div>
            
            <div class="feature-background">
              <div class="feature-pattern"></div>
            </div>
          </div>
        </div>

        <!-- 次要功能网格 -->
        <div 
          class="secondary-features-section" 
          :class="{ 'show-more': showMoreDepartments }"
          v-if="showMoreDepartments"
        >
          <h3 class="secondary-title">更多功能</h3>
          <div class="secondary-features-grid">
            <div 
              class="feature-card-small" 
              :class="{ 'card-visible': showMoreDepartments }"
              v-for="(dept, index) in secondaryDepartments" 
              :key="index"
              @click="handleDepartmentClick(dept, $event)"
              :style="{ 'transition-delay': (index * 0.1) + 's' }"
            >
              <div class="small-card-icon" :style="{ backgroundColor: dept.color }">
                <el-icon><component :is="dept.icon" /></el-icon>
              </div>
              <div class="small-card-content">
                <h4 class="small-card-title">{{ dept.name }}</h4>
                <p class="small-card-desc">{{ dept.desc }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 展开/收起控制 -->
        <div class="features-toggle">
          <el-button 
            type="text" 
            size="large" 
            @click="toggleMoreDepartments"
            class="toggle-btn"
          >
            <span>{{ showMoreDepartments ? '收起功能' : '查看更多功能' }}</span>
            <el-icon class="toggle-icon" :class="{ 'rotate': showMoreDepartments }">
              <ArrowDown />
            </el-icon>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 专业团队与平台动态 -->
    <div class="information-section">
      <div class="container">
        <el-row :gutter="32">
          <!-- 专业团队 -->
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="info-card">
              <div class="info-card-header">
                <div class="header-content">
                  <h3 class="info-card-title">
                    <span class="title-icon">👨‍⚕️</span>
                    专业医师团队
                  </h3>
                  <p class="info-card-subtitle">经验丰富的医疗专家为您提供专业服务</p>
                </div>
                <el-button type="text" @click="navigateTo('/portal/experts')" class="view-more-btn">
                  查看更多
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
              
              <div class="experts-list">
                <div class="expert-item-professional" v-for="(expert, index) in experts" :key="index" @click="navigateTo(`/portal/expert/${expert.id}`)">
                  <div class="expert-avatar-container">
                    <el-avatar :size="56" :src="expert.avatar" />
                    <div class="expert-online-status">在线</div>
                  </div>
                  <div class="expert-details">
                    <h4 class="expert-name">{{ expert.name }}</h4>
                    <span class="expert-title-tag">{{ expert.title }}</span>
                    <p class="expert-specialty-info">{{ expert.department }} · {{ expert.specialty }}</p>
                    <div class="expert-rating-info">
                      <el-rate v-model="expert.rating" disabled size="small" />
                      <span class="rating-score">{{ expert.rating }}.0分</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          
          <!-- 平台动态 -->
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <div class="info-card">
              <div class="info-card-header">
                <div class="header-content">
                  <h3 class="info-card-title">
                    <span class="title-icon">📢</span>
                    平台动态
                  </h3>
                  <p class="info-card-subtitle">最新功能更新与服务公告</p>
                </div>
                <el-button type="text" @click="navigateTo('/portal/news')" class="view-more-btn">
                  查看更多
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
              
              <div class="news-list-professional">
                <div class="news-item-professional" v-for="(news, index) in platformNews" :key="index" @click="navigateTo(`/portal/news/${news.id}`)">
                  <div class="news-date-container">
                    <div class="news-date-badge">
                      <span class="news-day">{{ news.day }}</span>
                      <span class="news-month">{{ news.month }}</span>
                    </div>
                  </div>
                  <div class="news-content-container">
                    <h4 class="news-title-professional">{{ news.title }}</h4>
                    <p class="news-summary-professional">{{ news.summary }}</p>
                    <div class="news-meta-info">
                      <span class="news-type-tag">{{ news.category }}</span>
                      <span class="news-read-count">{{ news.views }} 阅读</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 使用指南 -->
    <div class="usage-guide-section">
      <div class="container">
        <div class="guide-header">
          <h2 class="guide-title">使用指南</h2>
          <p class="guide-subtitle">四步完成，轻松享受智慧医疗服务</p>
        </div>
        
        <div class="guide-steps-container">
          <div 
            class="guide-step-professional" 
            :class="{ 'card-visible': cardsVisible }"
            v-for="(guide, index) in usageGuides" 
            :key="index" 
            @click="navigateTo(guide.link)"
            :style="{ 'animation-delay': (index * 0.2 + 1) + 's' }"
          >
            <div class="step-number-badge">{{ index + 1 }}</div>
            <div class="step-icon-container" :style="{ backgroundColor: guide.colorClass }">
              <el-icon class="step-icon"><component :is="guide.icon" /></el-icon>
            </div>
            <div class="step-content">
              <h4 class="step-title">{{ guide.title }}</h4>
              <p class="step-description">{{ guide.desc }}</p>
            </div>
            <div class="step-connector" v-if="index < usageGuides.length - 1">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { 
  ArrowRight, 
  Plus, 
  Minus,
  Search,
  Calendar,
  User,
  Document,
  FirstAidKit,
  Setting,
  ChatDotRound,
  UserFilled,
  DataBoard,
  Clock,
  ArrowDown,
  Picture
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const searchQuery = ref('')
const showMoreDepartments = ref(false)
const cardsVisible = ref(false)

// 热门搜索标签
const hotSearchTags = ['在线咨询', '预约挂号', '健康体检', '专家门诊', '报告查询']

// 核心服务数据
const coreServices = [
  {
    name: '在线预约',
    desc: '便捷预约专家门诊',
    icon: 'Calendar',
    path: '/portal/patient/appointment',
    color: '#1890ff',
    requiresAuth: true,
    doctorExcluded: true
  },
  {
    name: 'AI咨询',
    desc: '智能医疗助手，7×24小时在线',
    icon: 'ChatDotRound',
    path: '/portal/ai-consultation',
    color: '#52c41a',
    requiresAuth: false,
    doctorExcluded: false
  },
  {
    name: '知识图谱',
    desc: '医疗知识可视化展示',
    icon: 'DataBoard',
    path: '/portal/knowledge-graph',
    color: '#722ed1',
    requiresAuth: false,
    doctorExcluded: false
  },
  {
    name: '图像分割模块',
    desc: '医学影像智能分割处理',
    icon: 'Picture',
    path: '/portal/image-segmentation',
    color: '#fa8c16',
    requiresAuth: false,
    doctorExcluded: false
  }
]

// 专家数据
const experts = [
  { 
    id: 1, 
    name: '张主任', 
    title: '主任医师', 
    department: '心血管内科', 
    specialty: '冠心病、心力衰竭', 
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    rating: 5
  },
  { 
    id: 2, 
    name: '李专家', 
    title: '主任医师', 
    department: '神经内科', 
    specialty: '脑血管疾病', 
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    rating: 5
  },
  { 
    id: 3, 
    name: '王医师', 
    title: '副主任医师', 
    department: '消化内科', 
    specialty: '消化系统疾病', 
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    rating: 4
  }
]

// 平台动态
const platformNews = [
  {
    id: 1,
    title: '智能问诊系统正式上线',
    summary: 'AI辅助诊断功能全面升级，为用户提供更精准的健康咨询服务。',
    day: '28',
    month: '12月',
    views: '2.5k',
    category: '系统更新'
  },
  {
    id: 2,
    title: '专家在线咨询服务优化',
    summary: '响应时间缩短至5分钟内，专家团队7×24小时在线服务。',
    day: '25',
    month: '12月',
    views: '1.8k',
    category: '服务升级'
  },
  {
    id: 3,
    title: '健康档案功能全面升级',
    summary: '新增数据可视化分析，让您更直观了解自己的健康状况。',
    day: '22',
    month: '12月',
    views: '3.1k',
    category: '功能更新'
  }
]

// 使用指南数据
const usageGuides = [
  { 
    title: '注册登录', 
    desc: '创建个人账户', 
    icon: 'User', 
    link: '/portal/guide#register', 
    colorClass: '#1890ff'
  },
  { 
    title: '选择服务', 
    desc: '选择所需医疗服务', 
    icon: 'Calendar', 
    link: '/portal/guide#service', 
    colorClass: '#52c41a'
  },
  { 
    title: '在线服务', 
    desc: '享受便捷医疗服务', 
    icon: 'FirstAidKit', 
    link: '/portal/guide#service', 
    colorClass: '#722ed1'
  },
  { 
    title: '查看结果', 
    desc: '获取服务结果', 
    icon: 'Document', 
    link: '/portal/guide#result', 
    colorClass: '#fa8c16'
  }
]

// 平台功能导航
const departments = [
  { name: '个人中心', desc: '个人信息与设置', icon: 'User', link: '/portal/user/profile', color: '#1890ff', requiresAuth: true, adminOnly: false, doctorOnly: false },
  { name: '预约服务', desc: '在线预约挂号', icon: 'Calendar', link: '/portal/patient/appointment', color: '#52c41a', requiresAuth: true, adminOnly: false, doctorOnly: false, doctorExcluded: true },
  { name: '咨询服务', desc: '在线医疗咨询', icon: 'ChatDotRound', link: '/portal/patient/consultation', color: '#722ed1', requiresAuth: true, adminOnly: false, doctorOnly: false, doctorExcluded: true },
  { name: '报告查询', desc: '检查报告管理', icon: 'Document', link: '/portal/patient/reports', color: '#fa8c16', requiresAuth: true, adminOnly: false, doctorOnly: false, doctorExcluded: true },
  { name: '患者服务', desc: '患者服务中心', icon: 'User', link: '/portal/patient', color: '#13c2c2', requiresAuth: true, adminOnly: false, doctorOnly: false, doctorExcluded: true },
  { name: '医师工作台', desc: '医师专用工作台', icon: 'FirstAidKit', link: '/portal/doctor/workstation', color: '#eb2f96', requiresAuth: true, adminOnly: false, doctorOnly: true },
  { name: '系统管理', desc: '平台管理功能', icon: 'Setting', link: '/system/settings', color: '#666666', requiresAuth: true, adminOnly: true, doctorOnly: false },
  { name: '药品查询', desc: '药品信息查询', icon: 'FirstAidKit', link: '/portal/drugs', color: '#f5222d', requiresAuth: false, adminOnly: false, doctorOnly: false }
]

// 主要功能（前6个最重要的功能）
const primaryDepartments = computed(() => {
  return departments.slice(0, 6)
})

// 次要功能（剩余功能）
const secondaryDepartments = computed(() => {
  return departments.slice(6)
})

// 方法定义
const navigateTo = (path) => {
  router.push(path)
}

const handleServiceClick = (service) => {
  if (service.requiresAuth && !userStore.isLoggedIn) {
    ElMessage.info('请先登录系统')
    router.push('/login')
    return
  }
  
  if (service.doctorExcluded && userStore.userRole === 'doctor') {
    ElMessage.info('该功能不适用于医师用户')
    return
  }
  
  if (service.path === '/portal/patient' && userStore.userRole !== 'patient') {
    ElMessage.info('该功能仅限患者使用')
    return
  }
  
  router.push(service.path)
}

const handleDepartmentClick = (dept, event) => {
  // 创建波纹效果
  createRippleEffect(event)
  
  if (dept.requiresAuth && !userStore.isLoggedIn) {
    ElMessage.info('请先登录系统')
    router.push('/login')
    return
  }
  
  if (dept.adminOnly && userStore.userRole !== 'admin') {
    ElMessage.info('该功能仅限管理员使用')
    return
  }
  
  if (dept.doctorOnly && userStore.userRole !== 'doctor') {
    ElMessage.info('该功能仅限医师使用')
    return
  }
  
  if (dept.doctorExcluded && userStore.userRole === 'doctor') {
    ElMessage.info('该功能不适用于医师用户')
    return
  }
  
  router.push(dept.link)
}

const toggleMoreDepartments = () => {
  showMoreDepartments.value = !showMoreDepartments.value
}

// 创建波纹效果
const createRippleEffect = (event) => {
  const card = event.currentTarget
  const rect = card.getBoundingClientRect()
  const ripple = document.createElement('span')
  const size = 60
  const x = event.clientX - rect.left - size / 2
  const y = event.clientY - rect.top - size / 2
  
  ripple.style.width = ripple.style.height = size + 'px'
  ripple.style.left = x + 'px'
  ripple.style.top = y + 'px'
  ripple.classList.add('ripple-effect')
  
  card.appendChild(ripple)
  
  setTimeout(() => {
    ripple.remove()
  }, 600)
}

// 组件挂载后触发卡片动画
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      cardsVisible.value = true
    }, 300)
  })
})
</script>

<style scoped>
.portal-home {
  background: #ffffff;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero Section - 专业医疗平台设计 */
.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #1890ff 0%, #13c2c2 50%, #52c41a 100%);
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?ixlib=rb-4.0.3') center/cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.9) 0%, rgba(19, 194, 194, 0.9) 50%, rgba(82, 196, 26, 0.9) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  padding: 80px 0;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.title-highlight {
  color: #fff;
}

.title-normal {
  color: rgba(255, 255, 255, 0.9);
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 48px;
  opacity: 0.95;
  font-weight: 400;
}

.hero-features {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.feature-text {
  text-align: left;
}

.feature-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

.feature-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.feature-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
}

.hero-search {
  max-width: 600px;
  margin: 0 auto;
}

.search-container {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-input-professional {
  flex: 1;
}

.search-input-professional :deep(.el-input__inner) {
  height: 48px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-btn-professional {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 500;
  background: #ffffff;
  color: #1890ff;
  border: none;
}

.search-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.tags-label {
  font-size: 14px;
  opacity: 0.9;
}

.search-tag {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.search-tag:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 核心服务区域 */
.core-services-section {
  padding: 80px 0;
  background: #fafafa;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.section-subtitle {
  font-size: 1rem;
  color: #8c8c8c;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.service-card-professional {
  background: white;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
  /* 动画初始状态 */
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* 卡片进入动画 */
.service-card-professional.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-card-professional:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

/* 服务卡片闪光效果 */
.service-card-professional::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
  z-index: 1;
}

.service-card-professional:hover::before {
  left: 100%;
}

.service-icon-container {
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.service-icon-bg {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* 图标容器悬浮动画 */
.service-card-professional:hover .service-icon-bg {
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.service-icon {
  font-size: 28px;
  color: white;
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

/* 图标旋转动画 */
.service-card-professional:hover .service-icon {
  transform: rotate(-10deg) scale(1.1);
}

.service-name {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.service-card-professional:hover .service-name {
  color: #1890ff;
  transform: translateY(-2px);
}

.service-description {
  color: #8c8c8c;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
  position: relative;
  z-index: 2;
}

.service-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1890ff;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.service-card-professional:hover .service-action {
  transform: translateX(4px);
}

.action-arrow {
  transition: transform 0.3s ease;
}

.service-card-professional:hover .action-arrow {
  transform: translateX(6px) scale(1.1);
}

/* 平台功能导航 */
.platform-navigation {
  padding: 80px 0;
  background: white;
}

.main-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

/* 卡片进入动画 */
.feature-card-large {
  background: white;
  border-radius: 16px;
  padding: 32px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  
  /* 动画初始状态 */
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 悬浮效果 */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 卡片进入动画触发 */
.feature-card-large.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 交错动画延迟 */
.feature-card-large:nth-child(1).card-visible { animation-delay: 0.1s; }
.feature-card-large:nth-child(2).card-visible { animation-delay: 0.2s; }
.feature-card-large:nth-child(3).card-visible { animation-delay: 0.3s; }
.feature-card-large:nth-child(4).card-visible { animation-delay: 0.4s; }
.feature-card-large:nth-child(5).card-visible { animation-delay: 0.5s; }
.feature-card-large:nth-child(6).card-visible { animation-delay: 0.6s; }

/* 悬浮3D效果 */
.feature-card-large:hover {
  transform: translateY(-12px) rotateX(5deg) rotateY(5deg) scale(1.02);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(24, 144, 255, 0.1);
  border-color: var(--feature-color);
}

/* 渐变背景动画 */
.feature-card-large::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(24, 144, 255, 0.05) 0%, 
    rgba(19, 194, 194, 0.05) 50%, 
    rgba(82, 196, 26, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
  z-index: 1;
}

.feature-card-large:hover::before {
  opacity: 1;
}

/* 波纹点击效果 */
.feature-card-large {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(24, 144, 255, 0.3);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
  z-index: 10;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.feature-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

/* 图标动画效果 */
.feature-icon-large {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--feature-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

/* 图标悬浮动画 */
.feature-card-large:hover .feature-icon-large {
  transform: scale(1.1) rotate(360deg);
  box-shadow: 0 8px 20px rgba(24, 144, 255, 0.3);
}

/* 图标闪光效果 */
.feature-icon-large::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.6s ease;
}

.feature-card-large:hover .feature-icon-large::after {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

.feature-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #52c41a;
  font-weight: 500;
  background: rgba(82, 196, 26, 0.1);
  padding: 4px 8px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.feature-card-large:hover .feature-status {
  background: rgba(82, 196, 26, 0.15);
  transform: scale(1.05);
}

/* 状态指示器脉冲动画 */
.status-dot-active {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.feature-info {
  flex: 1;
  margin-bottom: 24px;
}

.feature-title {
  font-size: 18px;
  font-weight: 700;
  color: #262626;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.feature-card-large:hover .feature-title {
  color: var(--feature-color);
}

.feature-desc {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.5;
}

.feature-action {
  margin-top: auto;
}

/* 按钮动画效果 */
.feature-btn {
  width: 100%;
  height: 44px;
  font-weight: 600;
  border-radius: 12px;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.feature-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.feature-card-large:hover .feature-btn::before {
  left: 100%;
}

.feature-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, 
    rgba(24, 144, 255, 0.03) 0%, 
    rgba(19, 194, 194, 0.03) 50%, 
    rgba(82, 196, 26, 0.03) 100%);
  opacity: 0.8;
}

.feature-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(24, 144, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(82, 196, 26, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(114, 46, 209, 0.1) 0%, transparent 50%);
  border-radius: 16px;
}

/* 次要功能网格动画 */
.secondary-features-section {
  margin-top: 48px;
  padding: 32px 0;
  background: #fafafa;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.secondary-features-section.show-more {
  opacity: 1;
  transform: translateY(0);
}

.secondary-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 24px;
  text-align: center;
}

.secondary-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 0 32px;
}

/* 小卡片动画 */
.feature-card-small {
  background: white;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #f0f0f0;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.feature-card-small.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 小卡片交错动画 */
.feature-card-small:nth-child(1).card-visible { transition-delay: 0.1s; }
.feature-card-small:nth-child(2).card-visible { transition-delay: 0.2s; }
.feature-card-small:nth-child(3).card-visible { transition-delay: 0.3s; }
.feature-card-small:nth-child(4).card-visible { transition-delay: 0.4s; }

.feature-card-small:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: #1890ff;
}

.small-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.feature-card-small:hover .small-card-icon {
  transform: scale(1.1) rotate(5deg);
}

.small-card-content {
  text-align: center;
}

.small-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.feature-card-small:hover .small-card-title {
  color: #1890ff;
}

.small-card-desc {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.5;
}

/* 展开/收起控制动画 */
.features-toggle {
  text-align: center;
  margin-top: 48px;
}

.toggle-btn {
  color: #1890ff;
  font-weight: 500;
  font-size: 16px;
  padding: 12px 32px;
  border-radius: 24px;
  background: rgba(24, 144, 255, 0.1);
  border: 1px solid rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.toggle-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(24, 144, 255, 0.1), transparent);
  transition: left 0.6s ease;
}

.toggle-btn:hover::before {
  left: 100%;
}

.toggle-btn:hover {
  background: rgba(24, 144, 255, 0.15);
  border-color: #1890ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 144, 255, 0.2);
}

.toggle-icon {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-left: 8px;
}

.toggle-icon.rotate {
  transform: rotate(180deg);
}

/* 信息区域 */
.information-section {
  padding: 80px 0;
  background: #fafafa;
}

.info-card {
  background: white;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: 100%;
}

.info-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.info-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  font-size: 1.25rem;
}

.info-card-subtitle {
  color: #8c8c8c;
  font-size: 14px;
}

.view-more-btn {
  color: #1890ff;
  font-weight: 500;
}

/* 专家列表 */
.experts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.expert-item-professional {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.expert-item-professional:hover {
  background: #e6f7ff;
  border-color: #1890ff;
}

.expert-avatar-container {
  position: relative;
  margin-right: 16px;
}

.expert-online-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #52c41a;
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 500;
}

.expert-name {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.expert-title-tag {
  font-size: 12px;
  color: #1890ff;
  background: #e6f7ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.expert-specialty-info {
  color: #8c8c8c;
  font-size: 14px;
  margin: 8px 0;
}

.expert-rating-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rating-score {
  font-size: 14px;
  color: #8c8c8c;
  font-weight: 500;
}

/* 新闻列表 */
.news-list-professional {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-item-professional {
  display: flex;
  padding: 16px;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
}

.news-item-professional:hover {
  background: #e6f7ff;
}

.news-date-container {
  margin-right: 16px;
}

.news-date-badge {
  width: 56px;
  background: #1890ff;
  color: white;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.news-day {
  font-size: 18px;
  font-weight: 700;
  display: block;
}

.news-month {
  font-size: 12px;
  opacity: 0.9;
}

.news-title-professional {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
  line-height: 1.4;
}

.news-summary-professional {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-type-tag {
  font-size: 12px;
  color: #1890ff;
  background: #e6f7ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.news-read-count {
  font-size: 12px;
  color: #8c8c8c;
}

/* 使用指南 */
.usage-guide-section {
  padding: 80px 0;
  background: white;
}

.guide-header {
  text-align: center;
  margin-bottom: 48px;
}

.guide-title {
  font-size: 2rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.guide-subtitle {
  font-size: 1rem;
  color: #8c8c8c;
}

.guide-steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  align-items: center;
}

.guide-step-professional {
  background: #fafafa;
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  
  /* 动画初始状态 */
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 使用指南卡片进入动画 */
.guide-step-professional.card-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.guide-step-professional:hover {
  background: #e6f7ff;
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 32px rgba(24, 144, 255, 0.15);
}

.step-number-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  background: #1890ff;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.step-icon-container {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
}

.step-icon {
  font-size: 28px;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.step-description {
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1.5;
}

.step-connector {
  display: none;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-features {
    gap: 20px;
  }
  
  .feature-divider {
    display: none;
  }
  
  .search-container {
    flex-direction: column;
  }
  
  .search-btn-professional {
    width: 100%;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-card-large {
    padding: 24px;
    min-height: 200px;
  }
  
  .feature-icon-large {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .feature-title {
    font-size: 16px;
  }
  
  .secondary-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 16px;
  }
  
  .guide-steps-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .container {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .feature-card-large {
    padding: 20px;
    min-height: 180px;
  }
  
  .feature-icon-large {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .feature-title {
    font-size: 15px;
  }
  
  .feature-desc {
    font-size: 13px;
  }
  
  .secondary-features-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-card-small {
    padding: 20px;
  }
  
  .info-card {
    padding: 24px;
  }
}

/* JavaScript触发的动画类 */
.card-visible {
  animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
</style> 